import React, { useMemo, useState, useContext, useEffect, useRef } from "react";
import styles from "../css/order.module.css";
import { Button, Toast, Mask, List, ProgressBar, Card } from "antd-mobile";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useSelector } from "react-redux";
import { FormContent } from "../Fform";
import { CheckCircleOutline } from "antd-mobile-icons";
import dayjs from "dayjs";
import { getOrder } from "../../../api/info";

function OrderFooter(props) {
  let [sp] = useSearchParams();
  const count = useSelector((store) => store.order.psgArr.length);
  const setArr = useSelector((store) => store.order.setArr);
  const psgArr = useSelector((store) => store.order.psgArr);
  const amount = useMemo(() => sp.get("price") * count, [sp, count]);
  let form = useContext(FormContent);
  const [visible, setVisible] = useState(false);
  const [percent, setPercent] = useState(0);
  const timer = useRef(null);
  const show = () => {
    setVisible(true);
    timer.current = setInterval(() => {
      setPercent((prev) => prev + 10);
    }, 100);
  };
  const nav = useNavigate();
  useEffect(() => {
    if (percent >= 100) {
      clearInterval(timer.current);
      //跳转支付
      const obj = {
        train_id: props.id,
        start: props.startStation,
        end: props.endStation,
        date: sp.get("date"),
        seatType: sp.get("seatType"),
        seats: setArr,
        passengers: form.getFieldValue("contacts"),
      };
      console.log(obj);
      async function Order() {
        let { data: orderInfo } = await getOrder(obj);
        nav("/pays", { state: orderInfo });
        // return { info: orderInfo };
      }
      Order();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [percent]);
  const postOrder = async () => {
    try {
      const result = await form.validateFields();
      console.log(result);
      if (setArr.length !== count) {
        Toast.show("请选择座位！");
      }
      show();
    } catch (error) {
      console.log("报错");
      if (error.errorFields) {
        Toast.show("乘车人信息并不能为空");
      }
    }
  };
  return (
    <div className={styles.footer}>
      <span className={styles.left}>
        <span className={styles.price}>￥{amount}</span>
        <span className={styles.desc}>支付金额</span>
      </span>
      <Button
        onClick={postOrder}
        color="primary"
        disabled={amount === 0}
        className={styles.button}
      >
        提交订单
      </Button>

      <Mask visible={visible}>
        <div className={styles.overlayContent}>
          <Card>
            <List>
              <List
                style={{ "--border-inner": "none", "--border-top": "none" }}
              >
                <List.Item
                  description={
                    <span className={styles.desc}>
                      {props.startStation}-{props.endStation} {props.trainNo}
                    </span>
                  }
                  extra={<CheckCircleOutline color="#15a5c9" fontSize={24} />}
                >
                  <span className={styles.title}>请确认车次信息</span>
                </List.Item>
                <List.Item
                  description={
                    <span className={styles.desc}>
                      {dayjs(sp.get("date")).format("MM-DD ddd")}{" "}
                      {props.endTime}
                    </span>
                  }
                  extra={<CheckCircleOutline color="#15a5c9" fontSize={24} />}
                >
                  <span className={styles.title}>出发时间</span>
                </List.Item>
                <List.Item
                  description={
                    <span className={styles.desc}>
                      {psgArr.map((item) => item.name).join(" ")}
                    </span>
                  }
                  extra={<CheckCircleOutline color="#15a5c9" fontSize={24} />}
                >
                  <span className={styles.title}>乘车人</span>
                </List.Item>
              </List>
            </List>
            <div className={styles.foot}>
              <div className={styles.info}>
                <span>核验乘客信息成功，占座中...</span>
                <span className={styles.per}>{percent}%</span>
              </div>
              <ProgressBar percent={percent} className={styles.per} />
            </div>
          </Card>
        </div>
      </Mask>
    </div>
  );
}

export default OrderFooter;
